<!-- 电子书阅读器 -->
<template>
  <div id="reader-page" class="reader-page" :style="{'height':(boxHeight+30)+'px','width':boxWidth+'px',backgroundColor:themeList[defaultTheme].style.body.background}"
    v-loading="loading" :class="{'reader-mobile':isMobile}">
    <!-- pc工具栏 -->
    <div class="top_bar" :style="{'width':boxWidth+'px'}" v-if="!isMobile">
      <div class="top_item">
        <i class="iconfont icon-xinxiliebiao" @click="showMenu = !showMenu"></i>
        <el-popover
          placement="bottom"
          width="220"
          popper-class="theme-popover"
          trigger="hover">
          <div class="font-list">
            <div class="font-chagnge" @click="setFontSize(defaultFontSize-2)" :class="{'no-click':defaultFontSize<=12}">A</div>
            <div class="font-chagnge" @click="setFontSize(defaultFontSize+2)" :class="{'no-click':defaultFontSize>=24}">A</div>
          </div>
          <div class="theme-list">
            <div v-for="(item,index) in themeList" :key="index" class="theme-list-item" :style="{backgroundColor:item.style.body.background}" @click="setTheme(index)">
              <i class="el-icon-check"  v-if="defaultTheme==index" :style="{color:item.style.body.color}"></i>
            </div>
          </div>
         <template #reference>
              <i class="iconfont icon-fuwenbenbianjiqi_zitiyanse" style="margin-left:10px;"></i>
         </template>
        </el-popover>
      </div>
      <div class="top_item epub-title">
        {{currentName}}
      </div>
      <div class="top_item"></div>
    </div>
    <!-- 渲染主题 -->
    <div class="reader-container">
      <div id="reader" class="reader"></div>
    </div>
    <!-- 翻页工具 -->
    <div class="next_prev">
      <div class="pageItem left" v-if="!isMobile">
        <div @click.stop="prevPage">
          <!-- <i class="el-icon-arrow-left"></i> -->
          <el-icon><ArrowLeft /></el-icon>
        </div>
      </div>
      <div class="pageItem right" v-if="!isMobile">
        <div @click.stop="nextPage">
          <!-- <i class="el-icon-arrow-right"></i> -->
          <el-icon><ArrowRight /></el-icon>
        </div>
      </div>
      <div class="pageItem left" @click.stop="prevPage" v-if="isMobile">
      </div>
      <div class="center" @click="openBottomBar"  v-if="isMobile"></div>
      <div class="pageItem right" @click.stop="nextPage" v-if="isMobile">
      </div>
    </div>
    <!-- 移动端工具栏 -->
    <div class="bottom-bar" v-if="isMobile" :class="{'show-bottom-bar':bottomBar}">
      <i class="keowledge-mobile-iconfont keowledge-mobile-xinxiliebiao" @click="changeShowMenu()"></i>
      <i class="keowledge-mobile-iconfont keowledge-mobile-fuwenbenbianjiqi_zitiyanse" @click="changeShowFontSize()"></i>
      <i class="keowledge-mobile-iconfont keowledge-mobile-icon-" @click="changeThemeBar()"></i>
    </div>
    <!-- 移动端字号 -->
    <div class="font-size-bar" v-if="isMobile" :class="{'show-font-size-bar':showFontSize}">
      <div class="title">{{$t('message.text.fontSize')}}</div>
      <div class="font-size">
        <div class="font-size-item small" @click="setFontSize(defaultFontSize-2)">A</div>
        <span class="content">{{defaultFontSize}}</span>
        <div class="font-size-item big" @click="setFontSize(defaultFontSize+2)">A</div>
      </div>
    </div>
    <!-- 主题 -->
    <div class="theme-bar" v-if="isMobile" :class="{'show-theme-bar':showTheme}">
      <div class="theme-item" v-for="(item,index) in themeList" :key="index"  :style="{backgroundColor:item.style.body.background}" @click="setTheme(index)">
        <i class="knowledge-iconfont keowledge-xuanzhong"  v-if="defaultTheme==index" :style="{color:item.style.body.color}"></i>
      </div>
    </div>
    <!-- 目录栏 -->
    <div class="menu-mask" :style="{'height':isMobile?'calc(100vh - 100px)':(boxHeight-26)+'px','width':boxWidth+'px'}" v-if="showMenu" @click="showMenu = false"></div>
    <div class="menu_bar" :style="{'height':isMobile?'calc(100vh - 100px)':(boxHeight-26)+'px'}" v-if="showMenu">
      <vue-scroll :ops="{bar: {background: '#cecece',onlyShowBarOnScroll:false,minSize:0.1}}" ref="indexListScroll">
        <div v-for="(item,index) in navigation.toc" :key="index" @click="jumpTo(item)" class="menu-bar-item" :title="item.label">
          <span>
            {{item.label}}
          </span>
        </div>
      </vue-scroll>
    </div>
  </div>
</template>

<script setup lang="ts">
import {
  ref,
  reactive,
  toRefs,
  watch ,
  onMounted,
  getCurrentInstance,
  computed,
  onBeforeUnmount
} from 'vue' 
import { useRouter } from "vue-router"
import Epub from "epubjs";
import { getFileByte } from '@/api/common'
import { useHookI18n } from '@/hooks/i18n'
const { locale,$t } = useHookI18n()
const router = useRouter();

const emit = defineEmits(["renderFinish"])
const props = defineProps({
  isEpubUrl:{
    type:String,
    default:''
  },
  id:{
    type:String,
    default:null
  }
})

const  isMobile = computed(()=>{
  let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
  return flag;
})

const book = ref()
const ifTitleAndMenuShow = ref(false)
const fontSizeList = ref([
  {
    fontSize:12
  },
  {
    fontSize:14
  },
  {
    fontSize:16
  },
  {
    fontSize:18
  },
  {
    fontSize:20
  },
  {
    fontSize:22
  },
  {
    fontSize:24
  }
])
const marks = ref({
  12:'12',
  14:'14',
  16:'16',
  18:'18',
  20:'20',
  22:'22',
  24:'24'
})
const defaultFontSize = ref(16)
const themeList = ref([{
  name:'default',
  style:{
    body:{
      'color':'#000',
      'background':'#fff'
    }
  }
},{
  name:'eye',
  style:{
    body:{
      'color':'#000',
      'background':'#ceeaba'
    }
  }
},{
  name:'night',
  style:{
    body:{
      'color':'#fff',
      'background':'#000'
    }
  }
},{
  name:'gold',
  style:{
    body:{
      'color':'#000',
      'background': 'rgb(238, 232, 170)'//241.236,226
    }
  }
}])
const defaultTheme = ref(0)
const bookAvailable = ref(false)
const navigation = ref({
  toc:[]
})
const progress = ref(0)
const boxWidth = ref(0)
const boxHeight = ref(0)
const loading = ref(false)
const showMenu = ref(false)
const bottomBar = ref(false)
const showFontSize = ref(false)
const showTheme = ref(false)
const currentName = ref('')
const rendition = ref()
const locations = ref()
const themes = ref()
onMounted(()=>{
  window.addEventListener('resize',()=>{
    computedWidth()
  },true)
  boxWidth.value = document.getElementById('reader-page').parentNode.clientWidth
  if(!isMobile.value){
    if(window.location.href.indexOf('detail') > -1){
      boxHeight.value = document.getElementById('reader-page').parentNode.clientHeight  - 100
    }else{
      boxHeight.value = document.getElementsByClassName('knowledge-right')[0].clientHeight - 100
    }
  }else{
    boxHeight.value = document.body.clientHeight - 110-(isMobile.value?20:0)
  }
  loading.value = true
  getFileByte({id:this.id}).then(res=>{
    /* 火狐谷歌的文件下载方式 */
    book.value = new Epub(res.data)
    showEpub()
  })
})

onBeforeUnmount(()=>{
  window.removeEventListener('resize',()=>{
      computedWidth()
    },true)
})

function changeShowFontSize(){
  showTheme.value = false
  showMenu.value = false
  showFontSize.value = !showFontSize.value
}
function changeShowMenu(){
  showTheme.value = false
  showFontSize.value = false
  showMenu.value = !showMenu.value
}
function changeThemeBar(){
  showMenu.value = false
  showFontSize.value = false
  showTheme.value = !showTheme.value
}
function openBottomBar(){
  bottomBar.value = !bottomBar.value
  showFontSize.value = false
  showTheme.value = false
}
function computedWidth(){
  if(document.getElementById('reader-page')){
    boxWidth.value = document.getElementById('reader-page').parentNode.clientWidth
  }
  if(!isMobile.value){
    if(window.location.href.indexOf('detail') > -1){
      boxHeight.value = document.getElementById('reader-page').parentNode.clientHeight  - 100
    }else{
      boxHeight.value = document.getElementsByClassName('knowledge-right')[0].clientHeight - 100
    }
  }else{
    boxHeight.value = document.body.clientHeight - 100 -(isMobile.value?20:0)
  }
  if(rendition.value){
    rendition.value.resize(boxWidth.value-170,boxHeight.value-56)
  }
}
function setFontSize(fontSize){
  if(fontSize<12){
    defaultFontSize.value = 12
  }else if(fontSize>24){
    defaultFontSize.value = 24
  }else{
    defaultFontSize.value = fontSize
    if(themes.value){
      themes.value.fontSize(fontSize + 'px')
    }
  }
}
function registerTheme(){
  themeList.value.forEach(theme=>{
    themes.value.register(theme.name,theme.style)
  })
}
function setTheme(index){
  themes.value.select(themeList.value[index].name);
  defaultTheme.value = index;
}
function showEpub(){
  rendition.value = book.value.renderTo('reader',{
    width: !isMobile.value?(boxWidth.value-170):(window.innerWidth - 50),
    height: boxHeight.value-56
  })
  // 通过Rendition.display渲染电子书
  rendition.value.display()
  loading.value = false
  // 获取Theme对象
  themes.value = rendition.value.themes
  // 设置默认字体
  setFontSize(defaultFontSize.value)
  // themes.value.register(name,styles)
  registerTheme()
  // themes.value.select(name)
  setTheme(defaultTheme.value)
  // 获取locations对象 epubjs的钩子函数实现
  book.value.ready.then(()=>{
    navigation.value = book.value.navigation
    currentName.value = navigation.value.toc[0].label
    if(isMobile.value){
        return book.value.locations.generate((window.innerWidth * 2) * ((window.innerWidth - 50) / window.innerWidth))
    }else{
      return book.value.locations.generate()
    }
  }).then(result=>{
    locations.value = book.value.locations
    bookAvailable.value = true
    emit('renderFinish')
  })
}
function jumpTo(item){
  currentName.value = item.label
  rendition.value.display(item.href).then(()=>{
  })
}
function prevPage() {
  rendition.value.prev();
  setTimeout(()=>{
    getCurrentLabel()
  },1000 * 0.2)
}
function nextPage() {
  rendition.value.next();
  setTimeout(()=>{
    getCurrentLabel()
  },1000 * 0.2)
}
function getCurrentLabel(){
  let currentLocation = rendition.value.currentLocation()
  if(currentLocation.start?.index){
    currentName.value = navigation.value.toc[currentLocation.start.index].label
  }
}
function changeResize(){
  computedWidth()
}

</script>
<style scoped lang="scss">
.reader-page{
  padding: 0px 90px 0px 90px;
  position: relative;
  box-sizing: border-box;
  .top_bar{
    height: 56px;
    background-color: #778091;
    position: absolute;
    left: 0px;
    z-index: 9;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    box-sizing: border-box;
    .top_item{
      min-width: 10px;
      i{
        cursor: pointer;
        color: #fff;
        font-size: 20px;
      }
    }
    .epub-title{
      color: #fff;
      font-size: 18px;
    }
  }
  .menu_bar{
    position: absolute;
    left: 0px;
    z-index: 9;
    top: 56px;
    overflow: auto;
    background-color: #fff;
    padding-bottom: 1px;
    box-sizing: border-box;
    width:350px;
    .menu-bar-item{
      width:350px;
      padding: 0px 20px;
      box-sizing: border-box;
      height: 40px;
      display: flex;
      align-items: center;
      cursor: pointer;
      border-bottom: 1px solid #BBBBBB;
      span{
        overflow: hidden; text-overflow:ellipsis; white-space: nowrap;
        color: #101010;
      }
      &:hover{
        background-color: #f0f2f0 !important;
        span{
          color:#3EADFE !important;
        }
      }
    }
  }
  .menu-mask{
    position: absolute;
    left: 0px;
    z-index: 8;
    top: 56px;
    overflow: auto;
    background-color: rgba(0,0,0,0.3);
    padding-bottom: 10px;
    cursor: pointer;
    box-sizing: border-box;
  }
  .reader-container{
    width: 100%;
    padding-top: 56px;
  }
  .next_prev{
    .pageItem{
      position: absolute;
      height: 100%;
      top: 0px;
      width: 90px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 56px;
      font-weight: bold;
      color: #fff;
      div{
        visibility: hidden;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background-color: #B6B5B3;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
      }
    }

    .left{
      left: 0px;
    }
    .center{
      height: 100%;
      left: 20px;
      width: calc(100vw - 40px);
      position: absolute;
      top: 0px;
      z-index: 7;
    }
    .right{
      right: 0px;
    }
    &:hover{
      div{
        visibility: visible;
      }
    }
  }
  .bottom-bar{
    position: fixed;
    bottom: -70px;
    left: 0px;
    width: 100vw;
    height: 60px;
    z-index: 10;
    background-color: #778091;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: bottom 0.2s;
    box-sizing: border-box;
    i{
      color: #E4E4E4;
      font-size: 22px;
    }
  }
  .show-bottom-bar{
    bottom: 0px;
  }
}
.theme-popover{
  .font-list{
    padding: 0px 0px 0px;
    box-sizing: border-box;
    border-bottom:1px solid #e8e8e8;
    margin-bottom: 10px;
    display: flex;
    .font-chagnge{
      width: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-weight: 500;
      font-size: 18px;
      height: 40px;
      cursor: pointer;
      color: #101010;
      border-top-left-radius: 10px;
      user-select: none;
      &:last-child{
        font-size: 24px;
        border-top-left-radius: 0px;
        border-top-right-radius: 10px;
      }
      &:hover{
        background-color: rgba(62, 62, 62, 0.1);
      }
    }
    .no-click{
      color: #BBBBBB !important;
      cursor: no-drop;
    }
    .font-chagnge+.font-chagnge{
      border-left: 1px solid #e8e8e8;
    }
    ::v-deep(.el-slider__runway){
      height: 1px !important;
    }
    ::v-deep(.el-slider__bar){
      height: 1px;
      background-color: transparent;
    }
    ::v-deep(.el-slider__button-wrapper){
      top: -18px !important;
    }
    ::v-deep(.el-slider__stop){
      top: -3px !important;
      height: 6px !important;
      width: 1px !important;
      background-color: #101010 !important;
      &:first-child,&:last-child{
        height: 12px !important;
        top: -6px !important;
      }
    }
    ::v-deep(.el-slider__marks-text){
      min-width: 16px !important;
      margin-top: 10px !important;
    }
  }
  .theme-list{
    display: flex;
    align-items: center;
    padding: 0px 20px;
    justify-content: space-between;
    .theme-list-item{
      width: 25px;
      height: 25px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      border: 1px solid #bebebe;
      i{
        color: #fff;
      }
    }
    .theme-list-item+.theme-list-item{
      margin-left: 20px;
    }
  }
}
.reader-mobile{
  padding: 0px 20px 0 20px;
  .reader-container{
    padding-top: 0px;
    height: 100%  ;
  }
  .next_prev{
    .pageItem{
      visibility: visible !important;
      width: 30px;
    }
  }
  .menu-mask,.menu_bar{
    top: 0px;
  }
  .menu_bar{
    width: 75vw;
    .menu-bar-item{
      width: 75vw;
    }
  }
  .font-size-bar{
    display: flex;
    position: fixed;
    bottom: -70px;
    left: 0px;
    width: 100vw;
    height: 60px;
    z-index: 9;
    background: #778091;
    color: #E4E4E4;
    display: flex;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    transition: bottom 0.2s;
    .title{
      font-size: 18px;
    }
    .font-size{
      display: flex;
      align-items: center;
      margin-left: 30px;
      .font-size-item{
        border-radius: 20px;
        color: #101010;
        background: rgba(255,255,255,0.23);
        height: 40px;
        width: 77px;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      .small{
        font-size: 16px;
      }
      .big{
       font-size: 22px;
      }
      .content{
        margin: 0px 20px;
        font-weight: 500;
      }
    }
  }
  .show-font-size-bar{
    bottom: 60px;
  }
  .theme-bar{
    display: flex;
    position: fixed;
    bottom: -70px;
    box-sizing: border-box;
    left: 0px;
    width: 100vw;
    height: 60px;
    z-index: 9;
    background: #778091;
    color: #E4E4E4;
    display: flex;
    align-items: center;
    padding: 0 20px;
    transition: bottom 0.2s;
    justify-content: space-between;
    .theme-item{
      min-width: 20%;
      height: 30px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .theme-item+.theme-item{
      margin-left: 10px;
    }
  }
  .show-theme-bar{
    bottom: 60px;
  }
}
</style>
<style lang="scss">
.theme-popover{
  padding: 0px 0px 10px !important;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
</style>